<template lang="">
    <div>
        <van-nav-bar title="新建居民档案" />

        <div style="background: #F5F7FB;">
            <van-cell-group >
                <van-field v-model="item.name" required label="真实姓名"  />
                <van-field v-model="item.idcard" required label="身份证号"  />
                <van-field name="radio" required label="性别">
                    <template #input>
                        <van-radio-group v-model="item.sex" direction="horizontal">
                        <van-radio name="1">男</van-radio>
                        <van-radio name="2">女</van-radio>
                        </van-radio-group>
                    </template>
</van-field>
<van-field v-model="item.birthday" required label="身份证号" @click="toggleBirthday" />

<van-field v-model="item.tel" type="number" required label="联系电话" />
<van-field v-model="item.address" label="现居地" />
</van-cell-group>


<van-cell-group style="margin-top:1vh">
    <van-field v-model="item.tags" label="居民标签" />
    <van-cell>
        <template #title>
        <div class="tag-container">
            <div class="tag-item  tag-item-active">标签1</div>
            <div class="tag-item">标签2</div>
            <div class="tag-item">标签3</div>
            <div class="tag-item">标签4</div>
            <div class="tag-item">标签5</div>
        </div>
        </template>
    </van-cell>
</van-cell-group>

<van-cell-group style="margin-top:1vh">
    <van-field v-model="item.family" label="关联家人" readonly is-link />
    <van-field name="switch" label="立即签约">
        <template #input>
            <van-switch v-model="item.qianyue" />
        </template>
        </van-field>
</van-cell-group>


<div class="flex-center">
    <div class="add-btn" @click="saveItem">下一步</div>
</div>

</div>

<!-- 分类 -->
<van-popup v-model:show="isShowBirthday" :style="{ height: '80vh',width:'90vw' }">
    <van-date-picker @confirm="setDate" v-model="currentDate" :min-date="minDate" :max-date="maxDate" required
        title="生日" />
</van-popup>
</div>
</template>
<script>
import { ref, reactive } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { getItem, getItemCate, addItemCate } from "../api/index"
import { getUserInfo, log, LOCAL_USER } from "../utils/user"
import { showToast, showConfirmDialog } from 'vant';
export default {
    setup() {
        const router = useRouter()
        const route = useRoute()
        const userInfo = getUserInfo();
        const currentDate = ref(['2021', '01', '01']);

        const item = reactive({
            name: "",
            idcard: "",
            sex: 1,
            birthday: [],
            tel: "",
            address: "",
            tags: "",
            family:"",
            qianyue:true
        })

        const isShowBirthday = ref(false)
        const toggleBirthday = () => {
            isShowBirthday.value = !isShowBirthday.value
        }

        const setDate = e => {
            item.birthday = currentDate.value.join("-")
            isShowBirthday.value = !isShowBirthday.value
        }

        const saveItem = () => {
            router.push('/QianYueCreate')
        }
        return {
            item,
            isShowBirthday,
            toggleBirthday,
            setDate,
            currentDate,
            minDate: new Date(1900, 0, 1),
            maxDate: new Date(),
            saveItem
        }
    }
}
</script>
<style scoped>
.add-btn {
    background: #49B9AD;
    color: #FFFFFF;
    border-radius: 4px;
    width: 80vw;
    text-align: center;
    padding: 12px 8px;
    margin-top: 10vh;
}

.popup-list {
    height: 80%;
    overflow-y: scroll;
    margin: 0 3vw;
}

.popup-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 8px;
    border-bottom: 1px solid #E3E4E5;
}

.btn {
    background: #49B9AD;
    color: #FFFFFF;
    border-radius: 5px;
    width: 80vw;
    text-align: center;
    padding: 12px 8px;
    margin-top: 10px;
}

.tag-container {
    display: flex;
    flex-direction: row;
}

.tag-item {
    padding: 8px;
    margin: 5px;
    border-radius: 10px;
    background: #F5F7FB;
}

.tag-item-active {
    background: #EAFEFA;
    color: #49B9AD;
}
</style>